<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			
			.box {
				width: 400px;
				height: 400px;
				border: 5px solid black;

				/* 溢出隐藏 */
				/*overflow: hidden;*/
				
				/* x方向溢出的内容可以通过滚动显示 */
				/*overflow-x: scroll;*/
				/* y方向溢出隐藏 */
				/*overflow-y: hidden;*/
				
				/* 
					自动检测, 如果有超出的内容, 可以通过滚动显示
				 */
				overflow: auto;
			}

			.top {
				width: 800px;
				height: 50px;
				background-color: pink;
				border: 2px solid blue;
			}

			.bottom {
				width: 100px;
				height: 300px;
				background-color: yellowgreen;
				border: 5px solid gold;
			}


		</style>
	</head>
	<body>

		<div class="box">
			
			<div class="top"></div>
			<div class="bottom"></div>

		</div>
		
	</body>
</html>